<template>
  <div id="goods-container">
      <!-- 左侧图片 -->
      <div class="thumb">
          <div class="custom-control custom-checkbox">
              <!-- 复选框 -->
              <!-- change是复选框自带的 -->
              <!-- 修改为:id="'cb'+id"的目的是避免点击其他按钮还是第一个变化 -->
              <input type="checkbox" class="custom-control-input" name="" :id="'cb'+id" :checked="state"  @change="stateChange">
              <label class="custom-control-label" :for="'cb'+id">
                  <!-- 商品的缩略图 -->
                  <img :src="pic" alt="">
              </label>
          </div>
      </div>
      <!-- 右侧信息区域 -->
      <div class="goods-info">
          <!-- 商品标签 -->
          <h6 class="goods-title">{{title}}</h6>
          <div class="goods-info-buttom">
              <!-- 商品价格 -->
              <span class="goods-price">￥{{price}}</span>
              <!-- 商品的数量 -->
            <!-- <Counter :num="count" :id="id"></Counter> -->
            <slot></slot>
          </div>
      </div>
  </div>
</template>

<script>
import Counter from '@/components/Counter/Counter.vue'

export default {
    props:{
        // 商品id
        // 为啥这里要用id
        // 原因：将来，子组件中商品的勾选状态变化之后，需要通过子-->父的形式
        // 通知父组件根据id修改对应商品的勾选状态

        id:{
            required:true,
            type:Number
        },
        // 要渲染的商品标题
        title:{
            default:'',
            type:String
        },
        // 要渲染的商品图片
        pic:{
            default:'',
            type:String
        },
        price:{
            default:'',
            type:Number
        },
        state:{
            default:true,
            type:Boolean
        },
        count:{
            type:Number,
            default:1
        }

    },
    data() {
        return {
            
        }
    },
    methods: {
       stateChange(e){
        //    console.log(e);
        
           const newState =e.target.checked
        //    触发自定义事件
        this.$emit('state-change',{
            id:this.id,value:newState
        })
        }
    },
    components:{
        Counter,
    }
}
</script>

<style lang="less" scoped>
    #goods-container{
        border-top:1px solid #efefef;
        padding:10px;
        display: flex;
        .thumb{
            display: flex;
        align-items: center;
        img{
            width:100px;
            height: 100px;
            margin: 0 10px;
        }
        }
        .goods-info{
            display: flex;
            flex-direction:column;
            justify-content: space-between;
            flex: 1;
            .goods-title{
                font-weight: bold;
                font-size: 12px;
            }
            .goods-info-buttom{
                display: flex;
                justify-content: space-between;
                .goods-price{
                    font-weight: bold;
                    color: red;
                    font-size: 13px;
                }
            }
        }
    }
</style>